// eslint-disable-next-line import/no-unresolved
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import React, {Component} from 'react';
import {Card, Row, Col} from 'antd';
import {connect} from 'dva';

import StatusInfoOverview from "./components/StatusInfoOverview";
import CurrentStatusInfo from "./components/CurrentStatusInfo";
import PredictStatusInfo from "@/pages/FengXiang/components/PredictStatusInfo";
import BellowLocation from "@/pages/FengXiang/components/BellowLocation";
import {eventTrigger} from '@/utils/resize';
import {trigger} from '@/utils/utils';
import MainData from "./components/MainData";
import{currentTime, dateFormat} from "@/utils/time";
import PredictData from "./components/PredictData";
import BellowEvaluation from "./components/BellowEvaluation";

class FengXiang extends Component {


  currentReqRef = 0;

  predictReqRef = 0;

  bellowReqRef = 0;

  mainDataReqRef = 0;

  stopLoop = false; //页面取消挂载后,停止循环请求api

  showFlag = {
    showCurrent: false,
    showPredict: false,
    showBellowLocation: false,
    showMainData: false,
    showBellowEvaluation: false,
  };


  // 这里主要构造定时任务请求
  componentDidMount() {
    const {dispatch} = this.props;

    this.currentReqRef = requestAnimationFrame(() =>
      trigger(
        isFirst => {

          // if (!this.currentInfo) return
          if (isFirst) {
            const payload = {"continuous": "true", "latestId": null};
            dispatch({
              type: 'fengxiang/currentInfo',
              payload
            });
          }

          if (this.currentInfo && !isFirst) {
            const payload = {"continuous": "false", "latestId": this.currentInfo.getLatestId()};
            dispatch({
              type: 'fengxiang/currentInfo',
              payload
            });
          }


          dispatch({
            type: 'fengxiang/bellowEvaluation'
          });
        },
        new Date().valueOf(),
        15*1000,  // 预报频次修改为15s
        true,
        ()=> this.stopLoop));

    this.predictReqRef = requestAnimationFrame(() => {
      return trigger(
        isFirst => {
          const payload = isFirst ?
            {"continuous": "true", "latestId": null} :
            {"continuous": "false", "latestId": this.predictInfo.getLatestId()};

          dispatch({
            type: 'fengxiang/predictInfo',
            payload
          })
        },
        new Date().valueOf(),
        15*1000, // 预报频次修改为15s
        true, () => this.stopLoop);
    });

    this.bellowReqRef = requestAnimationFrame(() =>
      trigger(
        () => {
          dispatch({
            type: 'fengxiang/bellowLocation'
          })
        },
        new Date().valueOf(),
        4000,
        true,
        () => this.stopLoop));

    this.mainDataReqRef = requestAnimationFrame(() =>
      trigger(
        () => {
          let current = currentTime();
          dispatch({
            type: 'fengxiang/getMainData',
            payload:{
              start: dateFormat(new Date(current.valueOf()-24* 60 * 60 *1000)),
              end: dateFormat(current)
            }
          })
        },
        new Date().valueOf(),
        60 * 1000,    //参数调取以1分钟为频次更新
        true,
        () => this.stopLoop));

  }

  componentDidUpdate(preProps) {
    const {showCurrent, showPredict, showBellowLocation, showMainData, showBellowEvaluation} = this.showFlag;
    const {currentInfoLoading, predictInfoLoading, bellowLocationLoading, mainDataLoading, bellowEvaluationLoading,global} = this.props;


    if (!showCurrent) {
      if (currentInfoLoading) {
        this.showFlag.showCurrent = true;
      }
    }
    if (!showPredict) {
      if (predictInfoLoading) {
        this.showFlag.showPredict = true;
      }
    }

    if (!showBellowLocation) {
      if (bellowLocationLoading) {
        this.showFlag.showBellowLocation = true;
      }
    }

    if (!showMainData) {
      if (mainDataLoading) {
        this.showFlag.showMainData = true;
      }
    }

    if (!showBellowEvaluation) {
      if (bellowEvaluationLoading) {
        this.showFlag.showBellowEvaluation = true;
      }
    }


    if (preProps.global.collapsed !== global.collapsed) {
      eventTrigger()
    }
  }


  componentWillUnmount() {
    cancelAnimationFrame(this.mainDataReqRef);
    cancelAnimationFrame(this.currentReqRef);
    cancelAnimationFrame(this.predictReqRef);
    cancelAnimationFrame(this.bellowReqRef);
    this.stopLoop = true
  }


  render() {
    const topColResponsiveProps = {
      style: {
        marginTop: 24,
      },
    };

    const {
      statusInfoLoading,
      currentInfo,
      predictInfo,
      ruleResult,
      bellowLocation,
      bellowEvaluation,
      global
    } = this.props;

    const {showCurrent, showPredict, showBellowLocation, showBellowEvaluation} = this.showFlag;

    return (
      <PageHeaderWrapper title="烧结模块">
        <Row>
          <Col span={12} style={{paddingRight: 8}}>
            <Row style={{marginBottom: 24}}>
              <Card
                style={{width:'100%'}}
                bordered={false}
                loading={!showCurrent}>
                <CurrentStatusInfo
                  chartId='currentStatusInfo'
                  width={100}
                  height={300}
                  currentInfo={currentInfo}
                  ruleResult={ruleResult}
                  ref={grid => {
                    this.currentInfo = grid
                  }}
                />
              </Card>
            </Row>
            <Row>
              <Card
                style={{width:'100%'}}
                bordered={false}
                loading={!showPredict}>
                <PredictStatusInfo
                  chartId='predictStatusInfo'
                  width={100}
                  height={300}
                  data={predictInfo}
                  ref={grid => {
                    this.predictInfo = grid
                  }}
                />
              </Card>
            </Row>
          </Col>
          <Col span={12}>
            <Row style={{marginBottom: 10}}>
              <Card
                style={{width:'100%'}}
                title="状态评价"
                bordered={false}
                loading={!showCurrent}
              >
                <PredictData
                  data={currentInfo}
                  width={100}
                  height={115}
                />
              </Card>
            </Row>
            <Row style={{marginBottom: 24}}>
              <Card
                style={{width:'100%'}}
                bordered={false}
                loading={!showBellowEvaluation}
              >
                <BellowEvaluation
                  data={bellowEvaluation}
                  width={100}
                  height={70}
                />
              </Card>
            </Row>
            <Row style={{marginBottom: 24}}>
              <Card
                style={{width:'100%'}}
                bordered={false}
                loading={!showBellowLocation}>
                <BellowLocation
                  chartId='bellowLocation'
                  width={100}
                  height={300}
                  data={bellowLocation}
                  ref={grid => {
                    this.bellowLocation = grid
                  }}
                />
              </Card>
            </Row>
          </Col>
        </Row>
        <Row>
          <Card
            style={{width:'100%'}}
            bordered={false}
            title="主要参数">
            <MainData/>
          </Card>
        </Row>
        <Row {...topColResponsiveProps}>
          <Card
            style={{width:'100%'}}
            bordered={false}
            loading={false}>
            <StatusInfoOverview
              chartId='statusInfoOverview'
              width={100}
              height={400}
            />
          </Card>
        </Row>
      </PageHeaderWrapper>
    )
  }
}

//model/fengxiang 中的state挂载
export default connect(({fengxiang, loading, global}) => ({
  statusInfoOverview: fengxiang.statusInfoOverview,
  currentInfo: fengxiang.currentInfo,
  predictInfo: fengxiang.predictInfo,
  bellowLocation: fengxiang.bellowLocation,
  bellowEvaluation: fengxiang.bellowEvaluation,
  statusInfoLoading: loading.effects["fengxiang/statusInfoOverview"],
  currentLocationLoading: loading.effects["fengxiang/currentLocation"],
  currentInfoLoading: loading.effects["fengxiang/currentInfo"],
  ruleResult: fengxiang.ruleResult,
  predictInfoLoading: loading.effects["fengxiang/predictInfo"],
  bellowLocationLoading: loading.effects["fengxiang/bellowLocation"],
  mainDataLoading: loading.effects["fengxiang/mainData"],
  bellowEvaluationLoading: loading.effects["fengxiang/bellowEvaluation"],
  global
}))
(FengXiang);
